<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>最佳拍档</title>
    <meta name="keywords" content="最佳拍档">
    <meta name="description" content="最佳拍档">
    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/common/admin/css/style.css}">
    <script th:src="@{/layui/layui.js}" src="/layui/layui.js"></script>
    <script th:src="@{/common/js/jquery-3.3.1.min.js}" src="/common/js/jquery-3.3.1.min.js"></script>
    <script th:src="@{/common/js/common.js}" src="/common/js/common.js"></script>
    <style>
        .right h2{
            margin: 10px 0;
        }
        .right li{
            margin-bottom: 10px;
        }
        .layui-form-label{
            width: 130px;
        }
        .layui-input-block {
            margin-left: 160px;
        }
    </style>
</head>
<body>
<div>
    <fieldset class="layui-elem-field layui-field-title">
        <legend>品牌详情</legend>
    </fieldset>
    <form class="layui-form" lay-filter="BrandDetailForm">
        <div class="layui-form-item">
            <label class="layui-form-label">平台ID</label>
            <div class="layui-input-block">
                <input type="text" name="platform" autocomplete="off" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">公司名</label>
            <div class="layui-input-block">
                <input type="text" name="company" autocomplete="off" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">类品</label>
            <div class="layui-input-block">
                <input type="text" name="product" autocomplete="off" class="layui-input" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">品牌</label>
            <div class="layui-input-block">
                <input type="text" name="brand" autocomplete="off" class="layui-input" readonly>
            </div>
        </div>
    </form>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
        <legend>请完善以下信息方可提交授权申请</legend>
    </fieldset>
    <form class="layui-form" lay-filter="Authorization" id="auth_form_id">
        <div class="layui-form-item">
            <label class="layui-form-label">1688店铺名称</label>
            <div class="layui-input-block">
                <input type="text" name="shopName" placeholder="请填写1688店铺名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">1688一键铺货</label>
            <div class="layui-input-inline">
                <input type="radio" name="oneClickDelivery" value="1" title="是" checked>
                <input type="radio" name="oneClickDelivery" value="0" title="否">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">1688分账功能</label>
            <div class="layui-input-inline">
                <input type="radio" name="splitAccounts" value="1" title="有" checked>
                <input type="radio" name="splitAccounts" value="0" title="无">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">淘宝分销</label>
            <div class="layui-input-inline">
                <input type="radio" name="taobaoDistribution" value="1" title="可以" checked>
                <input type="radio" name="taobaoDistribution" value="0" title="不可以">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">社群分销</label>
            <div class="layui-input-inline">
                <input type="radio" name="communityDistribution" value="1" title="可以" checked>
                <input type="radio" name="communityDistribution" value="0" title="不可以">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">其他分销渠道</label>
            <div class="layui-input-block">
                <input type="text" name="otherDistribution" placeholder="请填写其他分销渠道" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">签约日期</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="startDate" placeholder="请选择签约日期" required lay-verify="required" id="startDateid" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">截止日期</label>
            <div class="layui-input-block">
                <input type="text" class="layui-input" name="dueDate" placeholder="请选择截止日期" required lay-verify="required" id="dueDateid" readonly>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">授权书附件</label>
            <div class="layui-input-block">
                <div id="attachment_content" style="padding-top: 9px;padding-bottom: 10px;"></div>
            </div>
        </div>
    </form>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
        <legend> 请完善签约的商品信息</legend>
    </fieldset>
    <div class="layui-row">
        <div class="layui-col-md12" style="padding-right: 20px">
            <table class="layui-table layui-form" lay-filter="EditListTable" id="EditListTable" lay-data="{id: 'tableid'}">
                <thead>
                <tr class="id36567">
                    <th lay-data="{field:'commodityName', align: 'center'}">商品名称</th>
                    <th lay-data="{field:'commodityMap', align: 'center', templet: '#imgTemp', style: 'height:90px;'}">商品图</th>
                    <th lay-data="{field:'commodityLink', align: 'center'}">商品链接</th>
                    <th lay-data="{field:'specification', align: 'center'}">规格</th>
                    <th lay-data="{field:'supplyPrice', align: 'center'}">供货价（元）</th>
                    <th lay-data="{field:'floorPrice', align: 'center'}">控价</th>
                    <th lay-data="{field:'fare', align: 'center'}">运费</th>
                    <th lay-data="{field:'remark', align: 'center'}">备注</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
    <script type="text/html" id="imgTemp">
        <img src="{{d.commodityMap}}" style="width: 100px;height: 80px;" />
    </script>
</div>

</body>
<script type="text/javascript">
    let customerId = "";
    let files = [];
    let attachments = [];

    window.onload = function(){
        customerId = GetQueryString("unid")
        if(isNotNull(customerId)){
            initFormData()
        }else{
            history.go(-1);
        }
    }

    //初始化数据
    function initFormData(){
        initPlatformInfo();
        initAuthorization();
    }

    //初始化平台信息
    function initPlatformInfo() {
        $.ajax({
            url: '/customer/'+customerId,
            type: 'get',
            data: {},
            dataType: 'json', // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
            success: function (res) {
                layui.use('form', function(){
                    let form = layui.form;
                    //给表单赋值
                    form.val("BrandDetailForm", {
                        "platform": res.data.customer.platform
                        ,"company": res.data.customer.company
                        ,"product": res.data.customer.product
                        ,"brand": res.data.customer.brand
                    });
                });
            }
        });
    }

    //初始化授权申请信息
    function initAuthorization(){
        $.ajax({
            url: '/supplement/'+customerId,
            type: 'get',
            data: {},
            dataType: 'json', // 用于设置响应体的类型 注意 跟 data 参数没关系！！！
            success: function (res) {
                if(res.data){
                    layui.use('form', function(){
                        let form = layui.form;
                        //给表单赋值
                        form.val("Authorization", {
                            "shopName": res.data.shopName
                            ,"oneClickDelivery": res.data.oneClickDelivery
                            ,"splitAccounts": res.data.splitAccounts
                            ,"taobaoDistribution": res.data.taobaoDistribution
                            ,"communityDistribution": res.data.communityDistribution
                            ,"otherDistribution": res.data.otherDistribution
                            ,"startDate": res.data.startDate
                            ,"dueDate": res.data.dueDate
                        });
                    });
                    //初始化附件
                    let attachs = res.data.attachment;
                    if(isNotNull(attachs)){
                        attachments = attachs.split(",");
                        randerAttachList(0)
                    }
                    $("#fileSelector").attr("hidden","hidden");
                    $("#auth_form_id *").attr("disabled","disabled");
                    $("#EditFormBtn").removeAttr('disabled');
                }else{
                    $("#EditFormBtn").hide();
                    $("#SubmitBtn").show();
                }
            }
        });
    }

    layui.use(['table', 'layer', 'form'], function () {//layui 模块引用，根据需要自行修改
        let layer = layui.layer, table = layui.table, form = layui.form;

        //加载列表的后端 url
        var getListUrl = '/commodity/detail/list';
        //对于任意一个 table，按照官方的说法，有三种不同的初始化渲染方式，不多介绍，而这里使用的方式姑且看做第三种：转换静态表格 方式
        //转换静态表格方式，自然首先需要有一个已经存在的表格，然后再通过 js 方式转化为 Layui 表格
        //无论哪种方式的 Layui table 初始化自然需要配置项
        //通过转化的方式初始化 Layui table，配置项部分可以在 源table中，部分在js中，源 table 的源代码上文已经给出，下面给出一个示例的 js 中的配置项
        var tableOptions = {
            elem: '#EditListTable',
            url: getListUrl, //请求地址
            method: 'GET', //方式
            id: 'EditListTable', //生成 Layui table 的标识 id，必须提供，用于后文刷新操作，笔者该处出过问题
            page: true, //是否分页
            request: {
                pageName: 'pageNum',
                limitName: 'pageSize'
            },
            where: { customerId: customerId }, //请求后端接口的条件，该处就是条件错误点，按照官方给出的代码示例，原先写成了 where: { key : { type: "all" } }，结果并不是我想的那样，如此写，key 将是后端的一个类作为参数，里面有 type 属性，如果误以为 key 是 Layui 提供的格式，那就大错特错了
            response: { //定义后端 json 格式，详细参见官方文档
                statusName: 'code', //状态字段名称
                statusCode: '200', //状态字段成功值
                msgName: 'msg', //消息字段
                countName: 'total', //总数字段
                dataName: 'rows' //数据字段
            },
            limit: 10,//每页显示条数
            limits: [10,20,50,100,150,200,300],//可选择范围
        };
        // 表初始化
        var createTable = function () {
            table.init('EditListTable', tableOptions);// table lay-filter
        };
        // 表刷新方法
        var reloadTable = function () {
            table.reload("tableid", { //此处是上文提到的 初始化标识id
                url: getListUrl,
                where: {customerId: customerId}
            });
        };
        // 表初始化
        createTable();

    });

    //搜索
    function search(){
        layui.use(['table', 'layer'], function () {//layui 模块引用，根据需要自行修改
            let layer = layui.layer, table = layui.table;
            table.reload('tableid', {
                where: {
                    searchStr:$("#keyword").val()
                }
                ,page: {
                    pageNum: 1 //重新从第 1 页开始
                }
            });
        })
    }

    //回车搜索
    function keydownSearch() {
        let event = window.event || arguments.callee.caller.arguments[0];
        if (event.keyCode == 13)
        {
            search();
        }
    }

    //渲染附件列表：0为展示列表，1为可删除列表
    function randerAttachList(flag){
        $("#attachment_content").html("");//先清空附件列表显示
        for(let i in attachments){
            let attach = attachments[i];
            let filename = attach.substring(attach.lastIndexOf("/")+1);
            if(flag == 0){
                $("#attachment_content").append("<p style='color: #1ea0fa;padding-bottom: 3px;' id='attachment_list"+i+"'><a href='"+attach+"' target='_blank'>"+filename+"</a></p>")
            }else if(flag == 1){
                $("#attachment_content").append("<p style='color: #1ea0fa;padding-bottom: 3px;' id='attachment_list"+i+"'><a href='"+attach+"' target='_blank'>"+filename+"</a><span style='padding-top: 2px;font-weight: 600;vertical-align: middle;color: red;padding-left: 3px;'><i class='layui-icon' onclick='del_attchment("+i+")'>&#x1006;</i></span></p>")
            }
        }
    }

</script>

</html>